<template>
    <div class="anomaly-dectection">
        <div class="anomaly-dectection-title">
            <div class="title">预警抓拍</div>
            <img src="@/assets/images/bigScreen/line1.png" alt="行为识别安全" class="title-img" />
        </div>
        <div class="anomaly-dectection-content">
            <div class="anomaly-dectection-content-no-data" v-if="abnormalLogList.length === 0">
                <img src="@/assets/images/bigScreen/greenNormal.png" alt="行为识别安全">
                <div>暂无识别异常</div>
            </div>
            <div v-else class="image-gallery"> <!-- 上一组下一组加减 currentGroup, 切换展示的数组下标元素 -->
                <div v-for="(group, index) in groupedImages" :key="index" v-show="currentGroup === index"
                    class="image-group">
                    <div v-for="item in group" :key="item.id" class="image-item"> <!-- 一个框 -->
                        <div class="image-item-bg">
                            <div class="image-item-bg-header">
                                <div>{{ getObjValueByField(alarmList, item.alarmType) }}</div>
                                <el-button type="primary" :icon="Search" circle size="small" @click="() => {
                                    largeImg = getFileAccessHttpUrl(item.imageLocation)
                                    isShowLarge = true
                                }" />
                            </div>
                            <img :src="getFileAccessHttpUrl(item.compressedImageLocation)" alt="" width="300px"
                                height="300px">
                            <div v-if="isShowLarge" class="modal" @click.self="isShowLarge = false">
                                <img :src="largeImg" class="modal-image">
                            </div>
                            <div class="image-item-bg-footer">
                                <div>抓拍时间：{{ item.catchTime }}</div>
                                <div>布点名称：{{ item.location }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div @click="prevGroup" class="prev-group">
                    <el-icon>
                        <ArrowLeftBold />
                    </el-icon>
                </div>
                <div @click="nextGroup" class="next-group">
                    <el-icon>
                        <ArrowRightBold />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { abnormalLog } from '@/api/bigScreen/bigScreen.api'
import { getFileAccessHttpUrl, getObjValueByField } from '@/utils/common/compUtils'
import { alarmList } from '@/views/bigScreen/bigScreen.data'
// import imgModal from '@/components/imgModal/imgModal.vue'
import {
    Search,
} from '@element-plus/icons-vue'

interface abnormalLogType {
    id: string;
    cameraId: number;
    location: string;
    imageLocation: string;
    compressedImageLocation: string;
    catchTime: Date;
    dangerLevel: number;
    alarmType: number;
    disposeState: number;
    disposeDate: Date;
    disposeRemarks: string;
    createTime: Date;
    updateTime: Date;
    updateBy: string;
    readStatus: number;
}

const abnormalLogList = ref<abnormalLogType[]>([])
const currentGroup = ref<number>(0)
const isShowLarge = ref<boolean>(false)
const largeImg = ref<string | undefined>('')
const queryParams = {
    pageNo: 1,
    pageSize: 30,
}
const total = ref(0)
async function getAbnormalLogList() {
    try {
        const res = await abnormalLog(queryParams)
        if (res.code === 200) {
            abnormalLogList.value = res.result.records
            if (res.result.total !== total.value) {
                ElNotification({
                    title: '警告',
                    message: '行为识别异常！',
                    type: 'error',
                })
                total.value = res.result.total
            }
        }
    } catch (error) {
        if (error instanceof Error) {
            ElMessage.error(error.message)
        }
    }
}

function mountTime() {
    const interval = setInterval(() => {
        getAbnormalLogList()
    }, 5000);

    return () => {
        clearInterval(interval);
    };
}

// 每三个为一组添加进groups数组中，10条数据就是数组中 4个 元素
const groupedImages = computed(() => {
    const groups = [];
    for (let i = 0; i < abnormalLogList.value.length; i += 3) {
        groups.push(abnormalLogList.value.slice(i, i + 3));
    }
    return groups;
})

function nextGroup() {
    if (currentGroup.value < groupedImages.value.length - 1) {
        currentGroup.value++;
    }
}

function prevGroup() {
    if (currentGroup.value > 0) {
        currentGroup.value--;
    }
}

onMounted(() => {
    // getAbnormalLogList()
    mountTime()
})

</script>

<style lang="scss" scoped>
.anomaly-dectection {
    height: 100%;
    width: 100%;
    padding: 5px;
    background-image: url('@/assets/images/k_4.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    &-title {
        height: 5%;
        padding-top: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .title {
            font-weight: bold;
            color: darkturquoise;
        }

        .title-img {
            width: 30%;
            height: 50%;
        }

    }

    &-content {
        height: 95%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        &-no-data {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;


            img {
                width: 30%;
                height: 30%;
            }
        }

        .image-gallery {
            width: 100%;
            padding: 0 5px;
            position: relative;

            .prev-group {
                position: absolute;
                left: 0;
                top: 50%;
                cursor: pointer;
            }

            .next-group {
                position: absolute;
                right: 0;
                top: 50%;
                cursor: pointer;
            }

            .image-group {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                width: 100%;

                .image-item {
                    margin: 0.5rem;
                    padding: 0.5rem;
                    text-align: center;
                    background-image: url('@/assets/images/light_bg.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    background-position: center;

                    &-bg {

                        &-header {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        }

                        &-footer {
                            text-align: left;

                            :first-child {
                                font-size: 12px;
                            }

                        }

                        .modal {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: fixed;
                            z-index: 9999;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background-color: rgba(0, 0, 0, 0.8);
                        }

                        .modal-image {
                            max-width: 90%;
                            max-height: 90%;
                        }
                    }

                    img {
                        max-width: 100%;
                        height: auto;
                    }
                }
            }

            button {
                margin: 5px;
            }
        }
    }
}
</style>